<script setup lang="ts">
import { ElDescriptions, ElDescriptionsItem, ElButton } from 'element-plus'
import { ref, onMounted } from 'vue'

import { initData } from '@/utils/db'

// import { invoke } from '@tauri-apps/api/core'

// import Database from '@tauri-apps/plugin-sql'
// import type { QueryResult } from '@tauri-apps/plugin-sql'

import { getName, getVersion, getTauriVersion } from '@tauri-apps/api/app'
import {
  appCacheDir,
  appConfigDir,
  appDataDir,
  appLocalDataDir,
  appLogDir,
  audioDir,
} from '@tauri-apps/api/path'

// const db = ref<Database | null>(null)
// const result = ref<QueryResult | null>(null)

const pathData = ref<any>(null)
onMounted(async () => {
  pathData.value = {
    名称: await getName(),
    版本: await getVersion(),
    Tauri版本: await getTauriVersion(),
    数据: await appDataDir(),
    配置: await appConfigDir(),
    本地数据: await appLocalDataDir(),
    缓存: await appCacheDir(),
    日志: await appLogDir(),
    音频: await audioDir(),
  }

  // result.value=
  // db.value = await Database.load('sqlite:test.db')
  // result.value = await db.value.execute(`
  // CREATE TABLE proverb (
  //     id    INTEGER PRIMARY KEY AUTOINCREMENT,
  //     word  TEXT NOT NULL,
  //     note  TEXT NOT NULL
  // )
  // `)
  // result.value = await db.value.execute(
  //   'INSERT INTO proverb (word, note) VALUES ($1, $2)',
  //   ['美轮美奂', '指房屋']
  // )
  // result.value = await db.value.execute('select * from proverb')
})
</script>
<template>
  <Suspense>
    <el-descriptions class="container" :column="1" :border="true">
      <el-descriptions-item>
        <template #label>数据库</template>
        <template #default>
          <el-button @click="initData"> 刷新</el-button>
        </template>
      </el-descriptions-item>
      <el-descriptions-item v-for="(v, k) in pathData" :key="k">
        <template #label>{{ k }}</template>
        <template #default>{{ v }}</template>
      </el-descriptions-item>
    </el-descriptions>
  </Suspense>
</template>

<style scoped>
.container {
  width: 100%;
  min-height: 80vh;
  display: flex;
  place-items: center;
}
</style>
